<template>
  <div>
    <van-nav-bar title="选择家庭成员" left-arrow left-text="返回" @click-left="backAction"/>
    <van-cell v-if="list.length===0" title="请添加家庭成员"/>

    <van-cell-group v-if="list.length!==0">
      <van-cell v-for="item in list" :key="item" :title="item.name"
                @click="goToSelectQuestion(item)" :clickable="true">
      </van-cell>
    </van-cell-group>

  </div>
</template>

<script>
import Vue from "vue"
import {Cell, CellGroup, Icon, NavBar} from "vant"
import axios from "axios"

Vue.use(Icon)
Vue.use(Cell)
Vue.use(CellGroup)
Vue.use(NavBar)
export default {
  name: "famList",
  data() {
    return {
      list: [],
    }
  },
  created() {
    let that = this;

    axios.get("http://qcjc.caulife.top/api/v1/getFamList", {
      params: {
        openid: sessionStorage.getItem("openid")
      }
    }).then(function (res) {
      that.list = res.data;
    })
  },
  methods: {
    goToSelectQuestion(item) {
      sessionStorage.setItem("respondent_id", item.id);
      sessionStorage.setItem("respondent_name", item.name);
      let selected_type = '0';

      if (item.age>3 && item.age<=6){
        selected_type="3"
      }

      if (item.age>6){
        selected_type="2"
      }

      // TODO: change type by age
      this.$router.push({
        name: "queAnswer", query: {
          question_type: selected_type
        }
      });
    },
    backAction() {
      history.back();
    }
  }
}
</script>

<style scoped>

</style>